<template>
	<!-- v-if="loaded" -->
	<view :id="templateId" class="container">
		<!-- 商品 begin -->
		<view style="display:block;">
			<!-- 商品详情轮播图 begin  -->
			<view class="por bd-b carousel">
				<swiper
					autoplay
					indicator-dots
					indicator-active-color="#fff"
					circular="true"
					duration="400"
				>
					<swiper-item
						class="swiper-item"
						v-for="(item, index) in goods.imagePathMain"
						:key="index"
					>
						<view class="image-wrapper">
							<image
								@click.stop="
									previewImage(goods.imagePathMain, index)
								"
								:src="baseFileUri + item"
								class="loaded"
								mode="aspectFill"
							></image>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!-- 商品详情轮播图 end  -->
			<!-- 商品简介 begin -->
			<view class="introduce-section">
				<!-- 商品名称 -->
				<view class="title-wrap">
					<text class="title vam">{{ goods.goodsName }}</text>
				</view>
				<!-- 积分数值 {{ goods.integral }} -->
				<view class="df jc-sb">
					<!-- 主题色 -->
					<view :style="themeStyles.textMainColor" class="price-box">1800积分</view>
				</view>
				<!-- <view class="share-box">
					<button class="btn" plain open-type="share">
						<uni-icon size="28rpx" name="share"> </uni-icon>
						<text class="text">分享</text>
					</button>
				</view> -->
			</view>
			<!-- 商品简介 end -->

			<!-- 其他信息 begin -->
			<view class="meta-section">
				<!--  -->
				<view class="meta-section__title">
					<view class="df ai-c tit">
						<text>发货</text>
					</view>
					<view class="content">
					</view>
					<view>剩余188</view>
				</view>
				<view class="meta-section__title">
					<view class="df ai-c tit">
						<text>运费</text>
					</view>
					<view class="content">
					</view>
					<view>10元</view>
				</view>
			</view>
			<!-- 其他信息 end -->

			<!-- 商品详情 begin -->
			<view class="detail-desc">
				<view class="d-header">
					<text>商品详情</text>
				</view>
				<!-- <rich-text :nodes="desc"></rich-text> -->
				<view
					v-for="(item, index) in goods.imagePathDetails"
					:key="index"
					class="desc-list"
				>
					<image
						style="width:100%; display:block;"
						:src="baseFileUri + item"
						mode="widthFix"
					/>
				</view>
			</view>
		</view>
		<!-- 商品详情 end -->
		<!-- 商品 end -->
		<!-- ----------------------------------------------- -->
		<!-- 优惠券 begin -->
		<view 
			class="" 
			style="display:none;">
			<!-- 优惠券信息展示 -->
			<view class="coupon-area">
				<!--  -->
				<view class="coupon-area__cardwrap">
					<!--  -->
					<view 
						class="coupon-area__card"
						:style="themeStyles.btnFullColor">
						<!-- 名称 -->
						<view class="coupon-area__cardname fs36 lh50 clamp">诚丰便利新人专享礼包</view>
						<!-- 金额 -->
						<view class="coupon-area__price">
							<view class="coupon-area__pricenum">168</view>
							<view class="coupon-area__pricetxt">元</view>
						</view>
						<!--  -->
						<view class="coupon-area__reach">满199可用</view>
					</view>
					<!-- 背景 -->
					<view class="coupon-area__bg">
						<image class="img-fit" src=""></image>
						<!--  -->
						<view 
							class="coupon-area__bg__time zz-flex zz-jc-c fs24 lh36 color666">使用日期：2020.05.07-2020.07.07</view>	
					</view>	
				</view>
				<!--  -->
				<view class="zz-mt22 zz-p_0_24 fs28 lh40 color333">诚丰便利新人专享礼包优惠券</view>
				<!--  -->
				<view 
					:style="themeStyles.textMainColor"
					class="zz-mt28 zz-p_0_24 fs36 lh50">
					200积分
				</view>
			</view>
			<!-- 优惠券详情 -->
			<view class="coupon-detail">
				<!--  -->
				<view class="zz-flex zz-jc-sb">
					<view class="fs28 lh40 color333">剩余数量</view>
					<view class="fs28 lh40 color666">20000</view>
				</view>
				<!--  -->
				<view class="zz-flex zz-jc-sb">
					<view class="fs28 lh40 color333">卡券类型</view>
					<view class="fs28 lh40 color666">满减券</view>
				</view>
				<!--  -->
				<view class="zz-flex zz-jc-sb">
					<view class="fs28 lh40 color333">有效期至</view>
					<view class="fs28 lh40 color666">2020/5/30</view>
				</view>
				<!--  -->
				<view class="zz-flex zz-jc-sb">
					<view class="fs28 lh40 color333">优惠内容</view>
					<view class="fs28 lh40 color666">110元</view>
				</view>
				<!--  -->
				<view class="zz-flex zz-jc-sb">
					<view class="fs28 lh40 color333">使用门槛</view>
					<view class="fs28 lh40 color666">满199可用</view>
				</view>
			</view>
		</view>
		<!-- 优惠券 end -->
		<!-- 底部操作菜单 -->
		<view class="page-bottom">
			<!-- 普通商品按钮区域 begin -->
			<!-- <template v-if="!goods.activityType">
				<view v-if="!hasLogin" class="action-btn-group">
					<button
						@click.stop="readyShowSpec(goods.goodsId, 0)"
						open-type="getUserInfo"
						@getuserinfo="loginShowSpecPop"
						type="primary"
						:style="themeStyles.btnLightAuxiliaryColor"
						class=" action-btn no-border add-cart-btn"
					>
						加入购物车
					</button>
					<button
						@click.stop="readyShowSpec(goods.goodsId, 1)"
						open-type="getUserInfo"
						@getuserinfo="loginShowSpecPop"
						type="primary"
						:style="themeStyles.btnFullColor"
						class=" action-btn no-border buy-now-btn"
					>
						立即购买
					</button>
				</view>
				<view v-if="hasLogin" class="action-btn-group">
					<button
						type="primary"
						:style="themeStyles.btnLightAuxiliaryColor"
						class=" action-btn no-border add-cart-btn"
						@click="showSpecPop(goods.goodsId, 0)"
					>
						加入购物车
					</button>
					<button
						type="primary"
						:style="themeStyles.btnFullColor"
						class=" action-btn no-border buy-now-btn"
						@click="showSpecPop(goods.goodsId, 1)"
					>
						立即购买
					</button>
				</view>
			</template> -->
			<!-- 普通商品按钮区域 end -->

			<!-- 活动商品按钮区域 begin -->
			<!-- v-if="goods.activityType" -->
			<!-- <template>
				<view v-if="!hasLogin" class="action-btn-group">
					<button
						@click.stop="readyShowSpec(goods.goodsId, 3)"
						open-type="getUserInfo"
						@getuserinfo="loginShowSpecPop"
						type="primary"
						:style="themeStyles.btnLightAuxiliaryColor"
						class=" action-btn no-border add-cart-btn"
					>
						立即兑换
					</button>
				</view>
				<view v-if="hasLogin" class="action-btn-group">
					<button
						type="primary"
						:style="themeStyles.btnLightAuxiliaryColor"
						class=" action-btn no-border add-cart-btn"
						@click="showSpecPop(goods.goodsId, 3)"
					>
						积分不足
					</button>
					<button
						type="primary"
						:style="themeStyles.btnFullColor"
						class=" action-btn no-border buy-now-btn"
						@click="showSpecPop(goods.goodsId, 4)"
					>
						立即兑换
					</button>
				</view>
			</template> -->
			<!-- 活动商品按钮区域 begin -->
			<!-- 积分兑换 -->
			<button 
				type="primary"
				:style="themeStyles.btnFullColor"
				class="page-bottom_button as-s ai-c jc-c fs28"
				@click="loginNavTo(`/pages/integral/pages/order/createOrder?goodsId=${goodsId}`)">立即兑换</button>
			<!-- 积分不足 -->
			<!-- <button 
				type="primary"
				:style="themeStyles.btnDisabled"
				class="page-bottom_button as-s ai-c jc-c fs28">积分不足</button> -->
		</view>
	</view>
</template>

<script>
/** api begin */
/* 获取商品详情 */
import { queryGoodsDetail } from "@/lib/api/goodsServer/goods";
//import { updateCard } from "@/lib/api/interestedServer/cart";
//import { updateGoodsCollect } from "@/lib/api/interestedServer/goodsCollect";

/** api end */
import { baseFileUri } from "@/utils/request/baseConfig";
import loginMixin from "@/mixins/login";
// 解析二维码
//import { analyzeQr } from "@/lib/analyzeQr";
import { mapState, mapMutations } from "vuex";

/** mixins begin */

// import loginMixin from '@/mixins/goods/login';

/** mixins end */

/** components begin */
import uniIcon from "@/components/uniIcon/uniIcon";
import specPop from "@/components/goods/specPop";
import uniCountdown from "@/components/uniCountdown/uniCountdown";
/** components end */

/** 内部参数（不在view页面使用）start */
/** 内部参数（不在view页面使用） end */
export default {
	mixins: [],
	components: {
		uniIcon,
		uniCountdown
	},

	data() {
		return {
			hasCartNum: null,
			baseFileUri,
			loding: true, // 数据是否加载完毕
			isChooseSpec: false, // 是否选择了规格
			buyNum: 1, // 购买数量
			goodsId: "", // 商品id
			specSelected: [], // 已选择的规格
			specDetailData: {}, // 商品规格
			favorite: null, // 是否收藏
			goods: {

				countDown: {
					hh: 43,
					mm: 0,
					ss: 10
				}
			},
			shareList: [],
			desc: "",
			specList: [],
			option: null,
			queryCartCountTimer: null
		};
	},
	computed: {
		...mapState("activity", ["activityData"])
	},

	async onLoad(option) {console.log(this.themeStyles);
		//console.log(option);
		/* 通过跳转链接获取goodsId */
		this.option = option;
		this.goodsId = option.goodsId || "";
		console.log(this.goodsId);
	},

	async onShow() {
		try {
			//获取商品详情
			await this.getGoodsDetail();
		} catch (error) {
			//console.log(error);
		}
		/* try {
			await analyzeQr(this.option);
		} catch (error) {
			console.log("error", error);
		} */
		// this.isChooseSpec = false;
		// await this.getGoodsDetail();
		// await this.getCartCount();
	},

	onHide() {
		clearInterval(this.getCartCountTimer);
	},

	onUnload() {
		clearInterval(this.getCartCountTimer);
	},

	//下拉刷新
	onPullDownRefresh() {
		this.isChooseSpec = false;
		this.getGoodsDetail();
	},

	onShareAppMessage(res) {
		return {
			title: "我发现一个好商品，一起来看看吧！",
			path: `/pages/integral/pages/goodsDetail?goodsId=${this.goodsId}`
		};
	},

	methods: {
		/* 积分vuex */
		...mapMutations("integral",["setIntegralGoodsDetail"]),
		// createActivity() {

		// },
		// 收藏商品
		async onToggleGoodsCollect(e) {
			if (!this.hasLogin) {
				uni.navigateTo({ url: "/pages/login/login" });
				return;
			}

			const propsData = {
				goodsId: this.goods.goodsId
			};
			try {
				const res = await updateGoodsCollect(propsData);
				console.log("res", res);
				let msg = "成功收藏";
				this.favorite = !this.favorite;
				console.log("this.favorite", this.favorite);
				if (!res.data.collected) {
					msg = "取消收藏";
				}
				this.$api.showToast(msg);
			} catch (error) {
				console.log("error", error);
				this.$api.showToast(error.resultInfo);
			}
		},

		// 规格子组件调用
		setSelectedViewData(data) {
			this.isChooseSpec = true;
			this.goods = data;
		},

		//规格弹窗开关
		toggleSpec() {
			if (this.specClass === "show") {
				this.specClass = "hide";
				setTimeout(() => {
					this.specClass = "none";
				}, 250);
			} else if (this.specClass === "none") {
				this.specClass = "show";
			}
		},
		/**  规格 end */

		// 获取商品详情
		async getGoodsDetail() {
			const propsData = {
				goodsId: this.goodsId
			};
			try {
				const res = await queryGoodsDetail(propsData);
				console.log(res);
				/* 
					goods.imagePathMain  轮播图图片数组
					goods.goodsName   商品名称 
				*/
				const goods = (this.goods = res.data);
				//this.favorite = goods.collect;
				/*  */
				/* 设置vuex积分的商品详情数据 */
				this.setIntegralGoodsDetail(res.data);
				return;

				/*  */

				/* goods.minPrice = `${goods.minPrice}`.split(".");
				if (goods.maxPrice) {
					goods.maxPrice = `${goods.maxPrice}`.split(".");
				}
				if (goods.activityType !== 0) {
					goods.minActivityPrice = `${goods.minActivityPrice}`.split(
						"."
					);
					if (goods.maxActivityPrice) {
						goods.maxActivityPrice = `${goods.maxActivityPrice}`.split(
							"."
						);
					}
				} */

				this.loaded = true;
			} catch (error) {
				console.log("error", error);
				await this.$api.showToast(error.resultInfo || "加载失败");
				uni.navigateBack();
			}
		},

		/** jlzm end */

		//分享
		share() {
			this.$refs.share.toggleMask();
		},

		stopPrevent() {}
	}
};
</script>

<style lang='scss'>
/* 积分模块的样式 --begin */
@import "../styles/common.scss";
/* 积分模块的样式 --end */
// 选择规格弹出层
@import "@/common/styles/goods/spec.scss";

page,
.container {
	background: $theme-main-bg-color;
	padding-bottom: 160rpx;
}

.carousel {
	height: 750rpx;
	position: relative;

	swiper {
		height: 100% !important;
	}

	.image-wrapper {
		width: 100%;
		height: 100%;
	}

	.swiper-item {
		display: flex;
		justify-content: center;
		align-content: center;
		height: 750rpx;
		overflow: hidden;

		image {
			width: 100%;
			height: 100%;
		}
	}
}

/* 商品简介 begin */
.introduce-section {
	position: relative;
	background: $theme-panel-bg-color;
	padding: 28rpx 24rpx;

	.title-wrap {
		width: 606rpx;

		.title {
			font-size: 28rpx;
			color: $theme-color-main-base;
			font-weight: 500;
		}
	}

	.price-box {
		display: flex;
		margin-top: 20rpx;
	}

	.share-box {
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		right: 0;
		bottom: 38rpx;
		width: 120rpx;
		height: 56rpx;
		border-radius: 200rpx 0 0 200rpx;
		overflow: hidden;
		background-color: #f3f4f5;
		/deep/ .template__icon {
			color: $theme-color-ghost-base;
		}
		button.btn {
			font-size: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 0;
			width: 100%;
			height: 100%;
			background-color: #f3f4f5;
			color: $theme-color-ghost-base;
		}
		.text {
			margin-left: 8rpx;
		}
	}
}

/* 商品简介 begin */

/** 其他信息 begin */
.meta-section {
	margin-top: 20rpx;
	background: $theme-panel-bg-color;
	padding: 28rpx 24rpx;
	font-size: 28rpx;
	color: $theme-color-ghost-base;
	background: #fff;

	&__title {
		display: flex;
		align-items: center;
		justify-content: space-between;
		.content {
			color: $theme-color-main-base;
			margin-left: 36rpx;
			flex: 1;
			display: flex;
			align-items: center;
		}
	}
	&__title + &__title {
		margin-top:40rpx;
	}
}
/** 其他信息 end */

/*  详情 */
.detail-desc {
	background: #fff;
	margin-top: 16rpx;
	width: 100%;
	.d-header {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80rpx;
		font-size: 28rpx;
		color: $theme-color-base;
		position: relative;

		text {
			padding: 0 20rpx;
			background: #fff;
			position: relative;
			z-index: 1;
		}

		&:after {
			position: absolute;
			left: 50%;
			top: 50%;
			transform: translateX(-50%);
			width: 300rpx;
			height: 0;
			content: "";
			border-bottom: 1px solid #ccc;
		}
	}
}
/* 优惠券 */
.coupon-area {
	height:664rpx;
	padding-top:40rpx;
	margin-bottom:20rpx;
	background-color:$theme-panel-bg-color;
	/* 314 182 */
	&__cardwrap {
		position:relative;
		height:456rpx;
		margin-bottom:22rpx;
	}
	/*  */
	&__bg {
		position:absolute;
		left:0;
		bottom:0;
		width:100%;
		height:182rpx;
		/* background-color:$theme-panel-bg-color; */
	}
	&__bg__time {
		position:absolute;
		top:0;
		left:0;
		width:100%;
		height:100%;
		padding-top:84rpx;
	}
	/*  */
	&__card {
		display:flex;
		flex-flow:column wrap;
		align-items:center;
		width:702rpx;
		height:430rpx;
		margin:0rpx 24rpx 26rpx;
		padding-top:32rpx;
		border-radius:16rpx;
	}
	/* 名称 */
	&__cardname {
		max-width:100%;
		margin-bottom:24rpx;
	}
	/* 金额 */
	&__price {
		display:flex;
		margin-bottom:16rpx;
	}
	/*  */
	&__pricenum {
		font-size:96rpx;
		font-weight:bold;
		line-height:118rpx;
	}
	/*  */
	&__pricetxt {
		font-size:42rpx;
		line-height:138rpx;
		margin-left:12rpx;
	}
	/*  */
	&__reach {
		font-size:24rpx;
		line-height:34rpx;
	}
}
/* 优惠券详情 */
.coupon-detail {
	min-height:764rpx;
	padding:40rpx 24rpx;
	background-color:$theme-panel-bg-color;
	& > .zz-flex {
		margin-bottom:40rpx;
	}
}
/* 底部操作菜单 */
.page-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0rpx;
	/* padding: 14rpx 22rpx; */
	padding: 12rpx 24rpx;
	z-index: 95;
	display: flex;
	/* justify-content: space-between;
		align-items: center;
	 */
	height: 108rpx;
	background: $theme-panel-bg-color;
	box-shadow:0rpx -1rpx 0rpx 0rpx rgba(204,204,204,0.5);
	color: $theme-color-ghost-base;
	/*  */
	.page-bottom_button {
		flex:1 0 auto;
		display:flex;
		line-height:40rpx;
		border-radius:200rpx;
	}
	/*  */
	.action-btn-group {
		display: flex;
		height: 80rpx;
		border-radius: 200rpx;
		overflow: hidden;
		// box-shadow: 0 20rpx 40rpx -16rpx #fa436a;
		// box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
		// background: linear-gradient(
		//   90deg,
		//   rgba(255, 171, 48, 1) 0%,
		//   rgba(248, 104, 31, 1) 53%,
		//   rgba(239, 92, 18, 1) 100%
		// );
		margin-left: 20rpx;
		position: relative;

		// &:after {
		//   content: "";
		//   position: absolute;
		//   top: 50%;
		//   right: 50%;
		//   transform: translateY(-50%);
		//   height: 28rpx;
		//   width: 0;
		//   border-right: 1px solid rgba(255, 255, 255, 0.5);
		// }

		.action-btn {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 216rpx;
			height: 100%;
			font-size: 28rpx;
			padding: 0;
			border-radius: 0;
			background: transparent;
		}
	}
}
</style>
